<template>
	<view class="monitor_body">
		<!-- 视频流播放 -->
		<view class="monitor_vedio">
			<video :src="playVedio.src" controls v-if="isPlay" style="width: 100%;height: 35vh;"></video>
			<span class="iconfont monitor_vedio_icon" @click="playCurrentVedio()" v-else>&#xe643;</span>
		</view>
		<!-- 视频信息 -->
		<view class="monitor_vedio_info monitor_vedio_info_additional">
			<view style="font-weight: bold;">
				<span class="iconfont .monitor_vedio_info_icon">&#xe760;</span>
				<text style='margin-left: 30px;'>{{playVedio.name}}</text>
			</view>
		</view>
		<!--视频回放-->
		<view class="vedio_playback">
			<!-- 选择时间 -->
			<view>
				<view class="vedio_playback_title">选择时间</view>
				<view class="vedio_playback_time">
					<view @click="DatePicker('datetime','startTime')"><text
							v-if="startTime==''">选择开始时间</text><text>{{startTime}}</text></view>
					<view style="color: black;">至</view>
					<view @click="DatePicker('datetime','endTime')"><text
							v-if="endTime==''">选择结束时间</text><text>{{endTime}}</text></view>
				</view>
			</view>
			<!-- 选择点位 -->
			<view style="height: calc(100% - 80px);">
				<view class="vedio_playback_title" style="margin-bottom: 10px;margin-top: 10px;">选择监控点位</view>
				<!-- 点位列表 -->
				<view class="vedio_playback_list">
					<view
						:class="playVedio.activeId==item.supervisoryId?'vedio_playback_info_checked':'vedio_playback_info'"
						v-for="(item,index) in vedioList" :key="index" @click="checked(item)">
						<view style="margin: auto;">
							<view style="font-weight: bold;">{{item.supervisoryPt}}</view>
							<view>{{item.supervisoryId}}</view>
						</view>
					</view>
				</view>
			</view>
			<mx-date-picker :show="showPicker" type="datetime" :value="value" :show-tips="true" :show-seconds="true"
				@confirm="ed" @cancel="ed" />
		</view>
	</view>
</template>

<script>
	import {
		listMonitorList
	} from '@/common/js/api/monitor.js';
	import mxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
	export default {
		components: {
			mxDatePicker
		},
		data() {
			return {
				playVedio: {
					activeId: '',
					name: '',
					src: ''
				},
				vedioList: [{
					supervisoryPt: "九号楼大厅西边",
					supervisoryId: "No.7E05BD8PAG260C5",
				}, {
					supervisoryPt: "九号楼大厅东边",
					supervisoryId: "No.6E20284P2G86VC2",
				}],
				isPlay: false,
				date: '',
				// /////////////////////////////////////////
				showPicker: false,
				startTime: '',
				endTime: '',
				//选择时间点--开始时间/结束时间
				type: '',
				value: ''
			}
		},
		methods: {
			//确认播放点位
			checked(data) {
				let startTime = 0
				let endTime = 0
				let diffTime = 0
				if (this.startTime == '' || this.endTime == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择时间',
					})
					return
				} else {
					startTime = new Date(this.startTime).getTime() / 1000
					endTime = new Date(this.endTime).getTime() / 1000
					diffTime = endTime - startTime
					if (startTime >= endTime || diffTime < 5) {
						uni.showToast({
							icon: 'none',
							title: '开始时间不能大于结束时间且间隔时间至少5秒钟'
						})
						return
					}
				}
				this.playVedio.activeId = data.supervisoryId
				this.playVedio.name = data.supervisoryPt
				let src =
					'http://101.206.123.213:7086/vod/center/cameraid/' + data.supervisoryId +
					'%240/substream/1/recordtype/1/totallength/' + diffTime + '/begintime/' + startTime +
					'/endtime/' + endTime + '.m3u8'
				this.playVedio.src = src
			},
			//显示时间选择器
			DatePicker(DateType, timeType) { //显示
				this.type = timeType;
				this.showPicker = true;
			},
			//返回时间
			ed(e) { //选择
				this.showPicker = false;
				if (e) {
					this[this.type] = e.value;
				}
			},
			//播放点位
			playCurrentVedio() {
				if (this.startTime == '' || this.endTime == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择时间'
					})
					return
				} else if (this.startTime != '' || this.endTime != '') {
					let startTime = new Date(this.startTime)
					let endTime = new Date(this.endTime)
					if(endTime>new Date()){
						uni.showToast({
							icon: 'none',
							title: '结束时间不能大于当前时间'
						})
						return
					}
					if (startTime >= endTime || endTime.getTime() - startTime.getTime() < 5000) {
						uni.showToast({
							icon: 'none',
							title: '开始时间不能大于结束时间且间隔时间至少5秒钟'
						})
						return
					}
				} else if (this.playVedio.activeId == '') {
					console.log(this.playVedio.activeId)
					uni.showToast({
						icon: 'none',
						title: '请选择监控点位'
					})
					return
				}
				this.isPlay = true
			},
			//监控点位列表
			getMonitorList() {
				listMonitorList().then(res => {
					if (res.code == 200) {
						let data = res.rows
						this.vedioList = data
					}
				})
			}
		},
		onLoad() {
			this.getMonitorList()
		}
	}
</script>

<style>
	@import url("/static/font/iconfont.css");
</style>
<style lang="scss" scoped>
	.monitor_body {
		height: 100vh;
		background-color: white;

		.monitor_vedio {
			position: fixed;
			height: 35%;
			background-color: black;
			display: table;
			width: 100%;

			.monitor_vedio_icon {
				color: #fff;
				font-size: 60px;
				display: table-cell;
				vertical-align: middle;
				text-align: center;
			}
		}

		.monitor_vedio_info {
			font-size: 14px;

			.monitor_vedio_info_type {
				font-size: 12px;
				color: #999;
				font-weight: bold;
			}

			.monitor_vedio_info_icon {
				color: #1884eb;
				position: absolute;
				font-size: 20px;
				font-weight: normal;
			}
		}

		.monitor_vedio_info_additional {
			padding-left: 20px;
			padding-right: 20px;
			line-height: 50px;
			position: fixed;
			top: 35%;
			width: 90%;
		}

		.vedio_playback {
			position: fixed;
			top: 43%;
			width: 100%;
			overflow: hidden;
			height: 57%;

			.vedio_playback_title {
				font-weight: bold;
				font-size: 12px;
				margin-left: 22px;
			}

			.vedio_playback_time {
				display: flex;
				justify-content: space-around;
				width: 90%;
				margin-left: 5%;
				color: #999;
				font-size: 14px;
				margin-top: 20px;
				border-bottom: 1px solid #eee;
				height: 30px;
			}

			.vedio_playback_list {
				width: 90%;
				margin-left: 5%;
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;
				height: calc(100% - 20px);
				overflow-y: auto;
			}

			.vedio_playback_info {
				height: 60px;
				width: 30%;
				border-radius: 10px;
				background-color: #f5f5f5;
				margin-bottom: 10px;
				margin-left: 2%;
				font-size: 12px;
				display: flex;
				align-items: center;
			}

			.vedio_playback_info_checked {
				height: 60px;
				width: 30%;
				border-radius: 10px;
				background-color: #1884eb;
				color: #fff;
				margin-bottom: 10px;
				margin-left: 2%;
				font-size: 12px;
				display: flex;
				align-items: center;
			}
		}
	}
</style>
